<template>
	<div>
		<div>User {{ $route.params.id }}</div>
		<div>User {{ id }}</div>
		<button @click="this.id = 789">change id</button>
	</div>
</template>

<script>
	export default {
		// name:"User",
		props: ["id"],
		created() {
			this.$watch(
				() => this.$route.params,
				(toParams, previousParams) => {
					// 对路由变化做出响应...
					console.log(
						`params changed from ${previousParams.id} to ${toParams.id}`
					);
				}
			);
		},
		// async beforeRouteUpdate(to, from) {
		// 	// 对路由变化做出响应...
		// 	console.log("beforeRouteUpdate",to,from);
		// },
		beforeRouteEnter(to, from) {
			// 在渲染该组件的对应路由被验证前调用
			// 不能获取组件实例 `this` ！
			// 因为当守卫执行时，组件实例还没被创建！
			console.log("User.vue beforeRouteEnter", from, to);
		},
		beforeRouteUpdate(to, from) {
			// 在当前路由改变，但是该组件被复用时调用
			// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
			// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
			// 因为在这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 `this`
			console.log("User.vue beforeRouteUpdate", from, to, this.id);
		},
		beforeRouteLeave(to, from) {
			// 在导航离开渲染该组件的对应路由时调用
			// 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
			console.log("User.vue beforeRouteLeave", from, to);
		},
	};
</script>

<style>
</style>